<template>
  <view>
    <view class="alldiv">
      <view class="headdiv">
        <!-- <web-view :src="mapUrl" :fullscreen="true"></web-view> -->
        <view id="map" class="map" tabindex="0"></view>
        <!-- <map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
        </map> -->
        <cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image>
			</view>
      <view class="bodydiv">
        <view class="start-point point" @click="goLocation(0)">
          <text class="van-ellipsis">{{ startPoint || language.FreeRide.zzwqscdd  }}</text>
          <view class="text">
            {{ language.FreeRide.sc }}
            <u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="12" style="display: inline-block"></u-icon>
          </view>
        </view>
        <view class="end-point point van-ellipsis" @click="goLocation(1)">
          {{ destinationPlaceholder }}
        </view>
        <!-- 快捷键 -->
        <shortcut :language="language" style="margin: 16px 0 12px 0;" />
        <!-- 快捷地址 -->
        <view class="address">
          <view class="address-div">
            <text class="title van-ellipsis">{{ address1.title }}</text>
            <text class="van-ellipsis">{{ address1.tip }}</text>
          </view>
          <view class="address-div">
            <text class="title van-ellipsis">{{ address2.title }}</text>
            <text class="van-ellipsis">{{ address2.tip }}</text>
          </view>
        </view>
        <!-- 最后的图片区域 -->
				<view class="imagediv">
					<image src="@/static/image/7@3x.png" mode="scaleToFill" />
				</view>
      </view>
    </view>
  </view>
</template>

<script>
import shortcut from './shortcut.vue';
import GoogleMap from "@/mixins/GoogleMap";
export default {
  components: {
    shortcut
  },
  mixins: [GoogleMap],
  props: {
    language: {
      type: Object,
      default: () => ({})
    },
    // 初始化地址
    initStartPlace: {
      type: Object,
      default: () => ({})
    },
    // 目的地提示语
    destinationPlaceholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mapUrl: '/static/mapUrl.html',
      webviewStyles: {
        width: '100%',
        height: '100%'
      },
      // latitude: 39.909,
      // longitude: 116.39742,
      // covers: [{
      //     latitude: 39.909,
      //     longitude: 116.39742,
      //     iconPath: "../../../static/location.png",
      //   },
      //   {
      //     latitude: 39.9,
      //     longitude: 116.39,
      //     iconPath: "../../../static/location.png",
      //   },
      // ],
      address1: {
        title: 'xxxxx（家庭地址）',
        tip: '大于50公里'
      },
      address2: {
        title: '上班',
        tip: '公司地址'
      }
    }
  },
  computed: {
    startPoint() {
      return this.startPointObj?.address || ''
    }
  },
  mounted() {
    if (this.initStartPlace?.latitude && this.initStartPlace?.longitude) {
      this.loadMap(this.initStartPlace.latitude, this.initStartPlace.longitude)
    } else {
      // todu h5调试，后续删除
      this.loadMap()
      // uni.getLocation({
      //   type: 'gcj02',
      //   altitude: true,
      //   geocode: true,
      //   success: function(res) {
      //     try {
      //       uni.setStorageSync('user_latitude', res.latitude);
      //       uni.setStorageSync('user_longitude', res.longitude);
      //       console.log(111)
      //       this.loadMap(res.latitude, res.longitude)
      //     } catch {
      //     }
      //   }
      // });
    }
  },
  methods: {
    returns: function() {
      uni.switchTab({
        url: '/pages/Home/Home'
      })
    },
    goLocation(type) {
      if (!this.startPoint) {
        return
      }
      this.$emit('goLocation', type)
    },
  }
}
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .headdiv {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex: 1;
    .map {
      // 隐藏选中时的div边框
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      outline: none;
      margin: -2px 0 0 -2px;
    }
    .back {
      position: absolute;
      top: calc(var(--status-bar-height) + 6rpx);
      left: 0;
      width: 80rpx;
      height: 60rpx;
    }
  }
  .bodydiv {
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0px -3px 6px  rgba(6, 145, 161, 0.05);
    border-radius: 20px 20px 0 0;
    padding: 14px 16px;
    background-color: #fff;
    .point {
      position: relative;
      font-size: 14px;
      line-height: 54px;
      padding: 0 26px;
      &::before {
        position: absolute;
        top: 24px;
        left: 10px;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      .text {
        display: inline;
        color: #333333;
        margin-left: 6px;
      }
    }
    .start-point {
      color: rgba(47, 212, 184, 1);
      .van-ellipsis {
        display: inline-block;
        max-width: calc(100% - 90px);
        vertical-align: bottom;
      }
      &::before {
        background-color: rgba(47, 212, 184, 1);
      }
    }
    .end-point {
      color: rgba(56, 56, 56, 1);
      font-weight: 700;
      font-size: 16px;
      border-radius: 16px;
      box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
      &::before {
        background-color: rgba(255, 141, 26, 1);
      }
    }
    .address {
      display: flex;
      padding: 16px 0;
      border-radius: 16px;
      background: rgba(250, 251, 253, 1);
      .address-div {
        flex: 1;
        flex-shrink: 0;
        color: rgba(153, 153, 153, 1);
        padding: 0 16px;
        font-size: 12px;
        line-height: 1.4;
        &:first-child {
          border-right: 1px solid rgba(217, 219, 218, 1);
        }
        .van-ellipsis {
          display: block;
        }
        .title {
          font-size: 14px;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 6px;
        }
      }
    }
    .imagediv {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      margin-top: 16px;
      border-radius: 67px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
web-view {
  width: 100%;
  height: 100%;
}
</style>